<template>
  <div class="outbox" ref="mianHeight">
    <div class="outboxM">
      <div class="tabContent">
        <div class="topTool">
          <el-input
            v-model="searchInput"
            style="width:300px; margin:0 5px 0 0;"
            size="small"
            placeholder="输入要搜索的标题、发布信息"
            clearable
          ></el-input>
          <el-select v-model="yearList" size="small" placeholder="请选择" @change="changeYear">
            <el-option
              v-for="item in yearOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>

          <el-button size="small" type="primary" @click="outbox_search()">搜索</el-button>
          <el-button size="small" type="success" @click="addnew">新增通知</el-button>
        </div>
        <div class="listMain" :style="{height:scHeight}">
          <ul v-if="pagination.dataList.length != 0">
            <li
              v-for="(n,index) in pagination.dataList"
              :key="index"
              @click="intdetails(n.noticeId,useYear)"
            >
              <div class="listBox">
                <h3 v-if="index==0"  @click.stop>
                  <span style="padding: 0 10px;">通知标题</span>
                </h3>
                <h4 class="overflow-ellipsis3">{{n.title}}</h4>
              </div>
              <div class="listBox">
                <h3 v-if="index==0"  @click.stop>
                  <span>通知标签</span>
                </h3>
                <dl>
                  <dt>类型：</dt>
                  <dd v-if="n.typeName">{{n.typeName}}</dd>
                  <dd v-else>无</dd>
                </dl>
                <dl>
                  <dt>重要性：</dt>
                  <dd>
                    <span class="importance" style="color:#01a0d2;" v-if="n.noticeImportance==1">一般</span>
                    <span
                      class="importance"
                      style="color:#ff9001;"
                      v-else-if="n.noticeImportance==2"
                    >重要</span>
                    <span class="importance" style="color:#F30;" v-else>
                      紧急
                      <i class="icon iconfont iconyujing"></i>
                    </span>
                  </dd>
                </dl>
              </div>
              <div class="listBox">
                <h3 v-if="index==0"  @click.stop>
                  <span>发布信息</span>
                </h3>
                <dl>
                  <dt>发布部门：</dt>
                  <dd>{{n.pubDeptName}}</dd>
                </dl>
                <dl>
                  <dt>发布人：</dt>
                  <dd>{{n.pubUserName}}</dd>
                </dl>
                <dl>
                  <dt>发布时间：</dt>
                  <dd style="font-size: 13px;">{{n.pubTime}}</dd>
                </dl>
              </div>
              <div class="listBox">
                <h3 v-if="index==0"  @click.stop>
                  <span>阅读情况</span>
                </h3>
                <span class="singleMes">
                  <em style="color:#51a220;">{{n.readCount}}</em>/
                  <em>{{n.allCount}}</em>
                </span>
              </div>
              <div class="listBox">
                <h3 v-if="index==0"   @click.stop>
                  <span>操作</span>
                </h3>
                <div class="bts">
                  <el-button
                    v-if="n.delete"
                    size="small"
                    type="danger"
                    @click.stop="outbox_delete(n.noticeId)"
                  >删除</el-button>
                </div>
              </div>
              <div class="clear"></div>
            </li>
          </ul>
          <div
            v-else-if="useInput"
            style="text-align: center;color:#9c9c9c;letter-spacing:1.5px;font-size:16px;"
            :style="{marginTop:top}"
          >暂未搜索到您想要的内容~</div>
          <div
            v-else
            style="text-align: center;color:#9c9c9c;letter-spacing:1.5px;font-size:16px;"
            :style="{marginTop:top}"
          >暂未发布通知~</div>
        </div>
        <div class="paging">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pagination.page"
            :page-sizes="[10, 20, 30, 50, 100, 200, 500]"
            :page-size="pagination.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total"
          ></el-pagination>
        </div>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import limit from "../../resource/js/limit";
export default {
  name: "inbox",
  data() {
    return {
      top: "",
      searchInput: "",
      useInput: "",
      scHeight: "",
      yearList: "",
      useYear: "",
      yearOptions: [],
      pagination: {
        total: 0,
        page: 1,
        size: 10,
        dataList: []
      }
    };
  },
  mounted() {
    var link = '';
    if(this.$route.matched.length<=2){
      link = this.$route.matched[1].path;
    }else{
      link =this.$route.matched[2].path;
    }
    limit(link);
    this.setheight();
    this.Initialization(); //获取当前年份及所有年份列表
  },
  watch: {
    $route: function(n, o) {
      if (n != o) {
        this.load_list();
      }
    },
    scHeight: function(n) {
      let h = n.replace(/^[^\d]*(\d+)[^\d]*$/, "$1");
      this.top = h / 2 + "px";
    }
  },
  methods: {
    
    handleSizeChange(size) {
      this.pagination.size = size;
      this.load_list();
    },
    handleCurrentChange(page) {
      this.pagination.page = page;
      this.load_list();
    },
    setheight: function() {
      let me = this;
      //   let thisheight = this.$refs.mianHeight.style.offsetHeight;
      let thisheight = window.getComputedStyle(me.$refs.mianHeight).height;
      let scHeight = parseInt(thisheight) - 150 + "px";
      me.scHeight = scHeight;
    },

    outbox_delete(id) {
      this.hw_confirm("您确定要删除吗？", () => {
        let url = "/send/notice/manage/delete";
        let param = {
          noticeId: id,
          year: this.useYear
        };
        this.$ajax
          .post(url, param)
          .then(out => {
            this.hw_result(out.data, true, this, () => {
              this.hw_success("删除成功");
              this.load_list();
            });
          })
          .catch(error => {});
      });
      return false;
    },
    Initialization: function() {
      let me = this;
      let daten = new Date();
      let year = daten.getFullYear();
      me.yearList = year.toString();
      me.useYear = year.toString();
      var arr = [];
      for (let i = 2019; i <= year; i++) {
        arr.push({ value: i, label: i });
      }
      this.yearOptions = arr;
      this.load_list();
    },

    changeYear(val) {},
    outbox_search() {
      this.pagination.page = 1;
      this.useYear = this.yearList;
      this.useInput = this.searchInput;
      this.load_list();
    },
    load_list() {
      let url = "/send/notice/manage/query";
      let param = {
        page: this.pagination.page,
        size: this.pagination.size
      };
      if (this.useInput) {
        param.queryParam = this.useInput;
      }
      if (this.useYear) {
        param.year = this.useYear;
      }
      this.$ajax
        .post(url, param)
        .then(out => {
          this.hw_result(out.data, true, this, () => {
            this.pagination.dataList = [];
            this.pagination.dataList = out.data.result.list;
            this.pagination.page = out.data.result.page;
            this.pagination.total = out.data.result.total;
          });
        })
        .catch(error => {
          this.pagination.dataList = [];
        });
    },
    intdetails(id, year) {
      localStorage.setItem("boxId", id);
      this.$router.push({
        name: "outboxdetails",
        params: { year: year, type: "send" }
      });
    },
    addnew: function() {
      this.$router.push({
        name: "newNotice"
      });
    }
  }
};
</script>
<style>
</style>
